<template>
<div class="edit-homework-box">
<lzk-tip info="查看任务" show="tip"></lzk-tip>
<el-descriptions :column="1" border>
	<el-descriptions-item
		label="标题"
		label-align="left"
		align="center"
		label-class-name="cs">
		{{ studentInfoData.editHomework.title }}
	</el-descriptions-item>

	<el-descriptions-item label="开始时间" label-align="left" align="center">
		{{getDateString(studentInfoData.editHomework.startTime)}}
	</el-descriptions-item>

	<el-descriptions-item label="截止时间" label-align="left" align="center">
		{{getDateString(studentInfoData.editHomework.endTime)}}
	</el-descriptions-item>
	<el-descriptions-item label="附件" label-align="left" align="center">
		<div class="appendix-box" @click="download(studentInfoData.editHomework.appendix)">
			{{studentInfoData.editHomework.appendix.split('/')[4]}}
		</div>
	</el-descriptions-item>

	<el-descriptions-item label="任务内容" label-align="left" align="center">
		<div class="content-box">
			{{studentInfoData.editHomework.content}}
		</div>
	</el-descriptions-item>
</el-descriptions>
<div class="content-answer-box">
	-- 我的答案 --
	<p style="height: 20px"></p>
	<!-- 写作业 start -->
	<div class="edit-answer" v-if="homeworkStudent==null||homeworkStudent=={}">
		<el-form ref="formRef" :model="answer" label-width="120px">
			<el-form-item label="答案">
				<el-input :rows="3" type="textarea" v-model="answer.content"></el-input>
			</el-form-item>
			<el-form-item label="上传附件">
				<el-upload
					action="http://localhost:8080/homework/uploadAppendix"
					:limit="1"
					@success="uploadAppendixSuccess"
					name="file"
					multiple
				>
					<el-button type="primary">点击上传</el-button>
					<span style="color: red;margin-left: 20px">{{answer.appendix}}</span>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
	<!-- 写作业 end -->
	<!-- 查看答案 start -->
	<div class="old-answer" v-else>
		<el-descriptions :column="1" border>
			<el-descriptions-item label="成绩" label-align="left" align="center">
				{{homeworkStudent.score==null?'未查阅':homeworkStudent.score}}
			</el-descriptions-item>
		<el-descriptions-item label="内容" label-align="left" align="center">
			{{homeworkStudent.content}}
		</el-descriptions-item>
		<el-descriptions-item label="附件" label-align="left" align="center">
			<div class="appendix-box" @click="download(homeworkStudent.appendix)">
<!--				{{homeworkStudent.appendix.split('/')[4]}}-->
				{{homeworkStudent.appendix}}
			</div>
		</el-descriptions-item>
		</el-descriptions>
	</div>
	<!-- 查看答案 end -->
</div>
</div>
</template>

<script>
import DateUtils from "@/utils/DateUtils";
import TipHeader from "@/components/tip/TipHeader";
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus";

export default {
	name: "HomeworkEdit",
	data(){
		return {
			/**
			 * 学员登录数据
			 */
			studentInfoData:this.$store.state.studentInfoData,
			/*
			* 作业对象
			* */
			answer:{},
			/*
			* 保存学生做的答案
			* */
			homeworkStudent:{},

		}
	},
	methods:{
		/*
		* 获取显示时间
		* @param date 时间戳
		* @returns {string}
		* */
		getDateString(date){
			return DateUtils.getDateSting(date);
		},
		/**
		 * 上传文件成功的回调
		 * @param response
		 * @param file
		 * @param fileList
		 */
		uploadAppendixSuccess(response, file, fileList){
			this.answer.appendix=response.data;
		},
		download(path){
			window.open("http://localhost:8080/file/download?path="+path);
		},
		onSubmit(){
			console.log(this.studentInfoData.editHomework.id)
			console.log(this.studentInfoData.loginInfo.id)
			axios.post(ipconfig.address+"/homework/addOrUpdateHomeworkStudent",{
				homeworkId:this.studentInfoData.editHomework.id,
				studentId:this.studentInfoData.loginInfo.id,
				...this.answer
			}).then((response)=>{
				if(response.data.code==200){
					ElMessage.success(response.data.message);
					location.reload();
				}else{
				    ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
			    console.log(error);
			});
		}
	},
	mounted() {
		// 在这获取做的作业
		axios.get(ipconfig.address+"/homework/homeworkStudent/"
			+this.studentInfoData.loginInfo.id+"?homeworkId="+this.studentInfoData.editHomework.id).then((response)=>{
			if(response.data.code==200){
				this.homeworkStudent=response.data.data;
				console.log(this.homeworkStudent);
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
	},
	components:{
		"lzk-tip":TipHeader,
	}
}
</script>

<style lang="scss" scoped>
.edit-homework-box{
	width: 100%;
	height: 100%;

	.appendix-box:hover{
		color: red;
		cursor: pointer;
	}

	.content-box{
		height: 200px;
	}

	.content-answer-box{
		width: 100%;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;

		.edit-answer{
			width: 100%;
			background: #ffffff;
			padding: 20px;

		}

		.old-answer{
			width: 100%;
			background: #ffffff;
			padding: 20px;
		}
	}
}
</style>